<template>
  <div class="mysearch-result-page">
    <div class="mysearch-tool-search-bar">
      <a href=""> <img class="mysearch-logo" src="./../assets/mysearch_logo_small.png" @click="goHome"></a>
      <MiniSearchBar :search="searchText" />
    </div>
    <div v-for="(item, index) in searchResultList" :key="index">
      <SearchResultItem :info="item" />
    </div>
    <div class="search-no-result" v-if="searchResultList.length==0">
      没有搜索到任何内容!
    </div>
  </div>
</template>

<script>
  import MiniSearchBar from '@/components/MiniSearchBar.vue';
  import SearchResultItem from '@/components/SearchResultItem.vue';
  // import db from '@/data/search.json'

  export default {
    name: 'search',
    data() {
      return {
        searchResultList: [],
        searchList: [{
          title: "【跟山地人学Vuex系列教程】课03.如何写第一个Vuex的Demo?_哔哩哔哩",
          url: "https://www.bilibili.com/video/av39058642/",
          desc: "【跟山地人学Vuex系列教程】微信:colin3dmaxGitHub源代码下载地址:https://github.com/colin3dmax/idev365_learn_vuex.",
          date: "6 天前"
        }, {
          title: "【跟山地人学TypeScript系列教程】 [进阶篇]29课.TypeScript的装饰器(上 ...",
          url: "https://www.bilibili.com/video/av39226658/",
          desc: "【跟山地人学TypeScript系列教程】【源代码下载】https://coding.net/u/colin3dmax/p/learn_vue/git微信:colin3dmax.",
          date: "4 天前"
        }, {
          title: "【跟山地人学Vue系列教程】课03.如何写第一个Vue的Demo?_哔哩哔哩",
          url: "https://www.bilibili.com/video/av39058642/",
          desc: "【跟山地人学Vuex系列教程】微信:colin3dmaxGitHub源代码下载地址:https://github.com/colin3dmax/idev365_learn_vuex.",
          date: "7 天前"
        }, {
          title: "【yuandage学Vue系列教程】课03.如何写第一个Vue的Demo?_哔哩哔哩",
          url: "https://www.bilibili.com/video/av39058642/",
          desc: "【跟山地人学Vuex系列教程】微信:colin3dmaxGitHub源代码下载地址:https://github.com/colin3dmax/idev365_learn_vuex.",
          date: "7 天前"
        }, {
          title: "【233和666学Vue系列教程】课03.如何写第一个Vue的Demo?_哔哩哔哩",
          url: "https://www.bilibili.com/video/av39058642/",
          desc: "【跟山地人学Vuex系列教程】微信:colin3dmaxGitHub源代码下载地址:https://github.com/colin3dmax/idev365_learn_vuex.",
          date: "7 天前"
        }]

      }
    },
    computed: {
      searchText() {
        return this.$route.params.searchText;
      }
    },
    created() {
      this.toSearchResult();
    },
    beforeRouteUpdate(to, from, next) {
      next();
      this.toSearchResult();
    },
    methods: {
      goHome() {
        this.$router.push("/");
      },
      toSearchResult() {
        const searchText = this.searchText.trim();
        if (searchText === '')
          return this.searchResultList = [];
        //模糊搜索
        var newList = this.searchList.filter(item => {
          if (item.title.includes(searchText)) {
            return item;
          }
        });
        this.searchResultList = newList;

        // if (db[searchText]) {
        //   console.log("do searchResult-->1", searchText);
        //   this.searchResultList = db[searchText];
        // } else {
        //   console.log("do searchResult-->2", searchText);
        //   this.searchResultList = [];
        // }
      }
    },
    components: {
      MiniSearchBar,
      SearchResultItem,
    }
  }
</script>

<style lang="less" scoped>
  @import "./../themes/base.less";

  // .mysearch-result-page {}

  .mysearch-tool-search-bar {
    text-align: left;
    padding: 20px;
    border-bottom: solid 1px @border-color;
  }

  .mysearch-logo {
    width: 148px;
    height: 30px;
    margin-right: 20px;
  }

  .search-no-result {
    padding: 20px;
    text-align: left;
  }
</style>